<template>
  <el-upload
    class="avatar-uploader"
    :show-file-list="false"
    action="#"
    :before-upload="beforeAvatarUpload"
    accept=".png,.jpg,.jpeg,.gif,.bmp,.webp"
    :http-request="handleUpload"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 上传图片
    handleUpload({ file }) {
      console.log(file)
      // 自定义上传行为
      // 创建COS实例
      const cos = new COS({
        SecretId: 'AKIDCHBsMcUJ5iKtJbeecXFj04vZ2LTVbYLv', // 秘钥id
        SecretKey: 'O3ffIivxpVzLetyuc6PXxA9tPhyDG6h5' // 秘钥key
      })
      // 调用uploadFile()
      cos.uploadFile({
        Bucket: '123-1318643661', // 桶名
        Region: 'ap-beijing', // 创建桶的地区
        Key: file.name, // 存储在桶里的对象键
        Body: file // 上传文件对象
      }, (err, data) => {
        console.log(err, data)
        if (err) return this.$message.error(err.message || '上传失败')
        // 成功提示
        this.$message.success('上传成功')
        // 子传父 (成功的图片带给父组件) 拼接https协议头
        // data.Location 为图片在服务器上的地址
        this.$emit('input', `https://${data.Location}`)
      })
    },
    // 上传前的校验 (类似路由前置守卫)
    beforeAvatarUpload(file) {
    // 校验类型通过accept属性完成
    // 校验图片大小,不能超过5M
    // file: 选中的图片文件对象
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isLt5M) {
        // 不通过
        this.$message.warning('图片大小不超过5M')
      }
      // 通过了
      return true
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
